<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>我的课程</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <!--条件查询-->
            <el-form :inline="true" :model="condition" class="demo-form-inline">
                <el-form-item label="查询">
                    <el-input v-model="condition" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="showAdd" type="text" size="small">添加</el-button>
            <!--展示我的私教-->
            <el-table :data="lesson" border>
                <el-table-column prop="lessonId" label="ID" v-if="false">
                </el-table-column>
                <el-table-column prop="name" label="课程名">
                </el-table-column>
                <el-table-column prop="type" label="等级">
                </el-table-column>
                <el-table-column prop="coachName" label="教练">
                </el-table-column>
                <el-table-column prop="price" label="课时费">
                </el-table-column>
                <el-table-column prop="introduce" label="课程介绍">
                </el-table-column>
                <el-table-column prop="state" label="状态">
                </el-table-column>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
    <el-dialog
            title="添加课程"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="lessonAddForm" label-width="80px">
            <el-form-item label="课程名">
                <el-input v-model="lessonAddForm.name"></el-input>
            </el-form-item>
            <el-form-item label="等级">
                <el-select v-model="lessonAddForm.type" placeholder="请选择课程水平">
                    <el-option label="初级" value="初级"></el-option>
                    <el-option label="中级" value="中级"></el-option>
                    <el-option label="高级" value="高级"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程介绍">
                <el-input type="textarea" v-model="lessonAddForm.introduce"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">添加</el-button>
                <el-button type="primary" @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                dialogVisible: false,
                lesson: [],
                lessonAddForm: {
                    name:"",
                    type:"",
                    introduce:""
                }
            }
        },
        methods: {
            del(row) {
                axios.post("/lesson/del?id=" + row.lessonId).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.$message({type: 'success',message: '已禁用!'});

                        // alert("success");
                        this.query();
                    }
                })
            },
            add() {
                axios.post("/lesson/create",this.lessonAddForm).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.$message({type: 'success',message: '添加成功!'});
                        // alert("成功");
                        this.dialogVisible = false;
                        this.query();
                    }else{
                        this.$message({type: 'warn',message: '添加失败,请检查是否设置课时费!'});
                    }
                })
            },
            showAdd() {
                this.dialogVisible = true;
            },
            query() {
                axios.get("/lesson/query").then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.lesson = resp.data.data;
                    }
                })
            }
        },
        created() {
            this.query();
        }
    })
</script>
</body>
</html>